import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTabBar, AtIcon, AtButton } from 'taro-ui'
import { Utils } from '../../utils/utils'

import './history.scss';

export default class History extends Taro.Component {
  constructor() {
    super(...arguments)
    this.state = {
      searchText: '',
      tabIndex: 0
    }
  }

  config: Taro.Config = {
    navigationBarTitleText: '历史工单'
  }

  onSearchTextChange(value) {
    this.setState({
      searchText: value
    })
  }

  tabClick(value) {
    this.setState({
      tabIndex: value
    })
  }

  getUnAcceptedList() {
    const list = [...Array(3).keys()].map((number) => {
      return (<View className='document_card'>
        { /* 第一行 */}
        <View className='at-row' style="height:30px;">
          <View className='at-col at-col-1 at-col--auto'>
            <AtIcon value='star-2' size='20' color='gold'></AtIcon>
          </View>
          <View className='at-col at-col-1 at-col--auto'>
            <Text style="font-size:12px;">显示器出现蓝屏现象</Text>
          </View>
          <View className='at-col at-col-1 at-col--auto'>
            <AtIcon value='chevron-right' size='16' color='blue'></AtIcon>
          </View>
          <View className='at-col' style="text-align:right;">
            <Text style="font-size:10px;color:green">处理中</Text>
          </View>
        </View>
        { /* 第二行 */}
        <View className='at-row '>
          <View className='at-col at-col-4' style="text-align:center;">
            <Image
              style='width: 90px;height: 90px;background: #fff;border-radius:3px;'
              src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587665805772&di=481a99b3b52b504d92a4baa7f2b4247c&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F1e30e924b899a9011623d18919950a7b0208f57f.jpg'
            />
          </View>
          <View className='at-col at-col-8' style="padding:10px;v-align:top;">
            <Text className="content" style="font-size:10px;">
              开机后正常进入，但是打开浏览器运{'\n'}
            行word文件预览时蓝屏，不知道和{'\n'}插件有没有关系。
          </Text>
          </View>
        </View>
        { /* 第三行 */}
        <View className='at-row'>
          <View className='at-col' style="text-align:right;">
            <Text className="content" style="font-size:10px;">
              服务申请时间：2020-03-06, 申请人：某某某
          </Text>
          </View>
        </View>
        { /* 第四行 */}
        <View className='at-row' style="margin-top:10px;">
          <View className='at-col at-col-3'></View>
          <View className='at-col at-col-3' style="padding:3px;">
            <AtButton type='secondary' size='small' circle >退回</AtButton>
          </View>
          <View className='at-col at-col-3' style="padding:3px;">
            <AtButton type='secondary' size='small' circle>流程查看</AtButton>
          </View>
          <View className='at-col at-col-3' style="padding:3px;">
            <AtButton type='primary' size='small' circle>完成确认</AtButton>
          </View>
        </View>
      </View>)
    });
    return ({list});
  }

  getAcceptedList() {
    return (
      <View className='document_card'>
        <View className='at-row'>
          <View className='at-col at-col-4'>B</View>
          <View className='at-col at-col-4'>B</View>
        </View>
      </View>
    );
  }

  render() {
    let tabList = [
      { title: '未受理' },
      { title: '处理中', text: 1 },
      { title: '待确认' },
      { title: '已完成' }
    ];

    let com = null;

    if (this.state.tabIndex == 0) {
      com = this.getUnAcceptedList();
    }
    else if (this.state.tabIndex == 1) {
      com = this.getAcceptedList();
    }
    else if (this.state.tabIndex == 2) {
      com = this.getUnAcceptedList();
    }
    else if (this.state.tabIndex == 3) {
      com = this.getUnAcceptedList();
    }

    return (
      <View style="padding:5px;">
        <AtSearchBar
          value={this.state.searchText}
          placeholder='历史工单'
          onChange={this.onSearchTextChange.bind(this)}
        />
        <AtTabBar
          tabList={tabList}
          onClick={this.tabClick.bind(this)}
          current={this.state.tabIndex}
        />
        {com}
      </View>
    )
  }
}

